<template>
  <view>
    <view
      v-for="item in itemList"
      :key="item.prop"
      :style="item.style"
      class="form_item"
    >
      <view class="form_left" :style="item.leftStyle">
        <text v-if="item.required" class="red_start">*</text>
        <text class="form_item_label">{{ item.label }}</text>
      </view>
      <view class="form_right" :style="item.rightStyle">
        <template v-if="item.type == 'switch'">
          <u-switch v-model="dataSource[item.prop]" size="20" inactive-color="#E2E2E2" active-color="#178FE5" />
        </template>
        <template v-else-if="item.type == 'textarea'">
          <u-textarea
            v-model="dataSource[item.prop]"
            auto-height
            style="text-align: right;"
            :placeholder="item.placeholder"
            :maxlength="item.maxlength"
            @input="handleInput"
          />
        </template>
        <template v-else>
          <u-input
            v-model="dataSource[item.prop]"
            border="none"
            input-align="right"
            :placeholder="item.placeholder"
            :maxlength="item.maxlength"
            :formatter="item.formatter"
            :type="item.type"
            :disabled="item.disabled"
            @input="handleInput"
          />
        </template>
      </view>
    </view>
  </view>
</template>
<script>
export default {
  props: {
    // 表单列集合
    formItems: {
      type: Array,
      default: () => []
    },
    // 表单数据
    formData: {
      type: Object,
      default: () => ({})
    }
  },
  options: {
    styleIsolation: 'shared', // 解除样式隔离
  },
  data() {
    return {
      labelStyle: {
        marginLeft: '24rpx',
      },
    }
  },
  computed: {
    itemList() {
      return [...this.formItems]
    },
    dataSource() {
      return { ...this.formData }
    }
  },
  methods: {
    // 获取表单数据
    getFormData() {
      return this.dataSource
    },
    // 输入内容
    handleInput() {
      // 输入任何一项item，都触发，实时更新formData
      this.$emit('update:form-data', this.dataSource)
    }
  }
}
</script>
<style lang="scss" scoped>
.form_item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 104rpx;
  line-height: 104rpx;
  margin: 0 24rpx;
  border-bottom: 1rpx solid $uni-f5bg-color;
  .form_left {
    .red_start {
      color: #E51728;
    }
    .form_item_label {
      color: #808080;
    }
    .red_start, .form_item_label {
      font-size: 28rpx;
    }
  }
  .form_right {
    width: 75%;
  }
}
/deep/ .u-textarea {
  text-align: right;
  right: -18rpx;
}
</style>
